//百科左侧菜单栏页
<template>
  <div class="box">
    <div class="box2">
      <div class="box-left">
        <div class="left-childen" v-for="(classes, index) in data" :key="index">
          <!-- 种类总称 -->
          <p class="p">
            {{ index }}
          </p>
          <!-- 每一个种类下的子类  class="li"-->
          <!-- <p  @click="showDetail(plant)" v-for="(plant, index) in classes" :key="index">
                        {{plant}}
                    </p> -->
          <router-link
            class="li"
            :to="{ path: '/baike/rightDetail', query: { plant,current:1,size:16 } }"
            v-for="(plant, index) in classes"
            :key="index"
          >
            <!-- {{plant}} -->
            <button class="btn">{{ plant }}</button>
          </router-link>
        </div>
      </div>
      <div class="box-right">
        <router-view class="box-right-childen"></router-view>
      </div>
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br />
    <div class="footer">
      <div class="top">
        <img
          src="@/assets/11111(1)(1).png"
          style="width: 360px; margin-top: 0px; margin-left: 10px;height: 170px;"
        />
      </div>
      <div class="right">
        <h3
          class="h3"
          style="
            color: aliceblue;
            margin-left: 34px;
            font-size: 30px;
            margin-top: 20px;
          "
        >
          快速导航
        </h3>
        <ul class="ul">
          <li @click="ff1">首页&nbsp;</li>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
          <li @click="ff2"><a>识别&nbsp;</a></li>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
          <li @click="ff3"><a>百科&nbsp;</a></li>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />
          <li @click="ff4"><a>搜索&nbsp;</a></li>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
          <li @click="ff5"><a>新闻&nbsp;</a></li>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
          <li @click="ff6"><a>反馈&nbsp;</a></li>
          <br /><br />
          <li @click="ff7"><a>用药&nbsp;</a></li>
        </ul>
      </div>
      <div class="right2">
        <h3
          class="h3"
          style="
            color: aliceblue;
            margin-left: 30px;
            font-size: 30px;
            margin-top: 20px;
          "
        >
          关于我们
        </h3>
        <h4 style="margin-top: -12px">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参赛队伍&nbsp;:&nbsp;&nbsp;你就说对不队
        </h4>
        <h3
          class="h3"
          style="
            color: aliceblue;
            margin-left: 30px;
            font-size: 30px;
            margin-top: -12px;
          "
        >
          联系我们
        </h3>
        <br />
        <h4 style="margin-top: -40px">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们&nbsp;:&nbsp;&nbsp;34014439
        </h4>
      </div>
    </div>
  </div>
</template>
<script>
import { menuBar } from "@/api/index";
export default {
  data() {
    return {
      data: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      menuBar().then((res) => {
        this.data = JSON.parse(JSON.stringify(res.data)).data;
        // console.log("baike==="+JSON.stringify(res.data));
      });
      // this.$router.push("/baike/rightDetail");
    },

    ff1() {
      this.$router.push("/home");
      this.$store.commit("setMenuBar", false);
    },
    ff2() {
      this.$router.push("/shibie");
      this.$store.commit("setMenuBar", true);
    },
    ff3() {
      this.$router.push("/baike"); //左侧菜单栏
      this.$router.push("/baike/rightDetail"); //右侧病害列表
      //是否在识别页（顶部菜单栏的识别），true代表是
      this.$store.commit("setMenuBar", false);
    },
    ff4() {
      this.$router.push("/search/search2");
       this.$store.commit("setMenuBar", false);
    },
    ff5() {
      this.$router.push("/Medication/index2");
    },
    ff6() {
      this.$router.push("/Medication/index3");
    },
    ff7() {
      this.$router.push("/Medication/index1");
    },
  },
};
</script>
<style scoped>
.box {
  width: 1100px;
  /* height:900px; */
  background-color: rgb(255, 255, 255);
  margin-top: -100px;
  /* margin: auto; */
}
.box2 {
  width: 1100px;
  height: 800px;
}
.left-childen {
  width: 320px;
  height: 800px;
  background-color: rgb(255, 255, 255);
}
.box-left {
  width: 320px;
  height: 700px;
  overflow: scroll;
  overflow-y: none;
  overflow-x: hidden;
  float: left;
}
.left-childen {
  width: 300px;
  height: 90px;
  background-color: rgb(255, 255, 255);
  /* overflow-x: hidden; */
}
.p {
  width: 170px;
  height: 29px;
  background-color: rgb(70, 123, 63);
  font-size: 23px;
  color: rgb(255, 255, 255);
}
.li {
  /* width:40px;
    height:20px; */
  /* background-color: black; */
  list-style: none;
  display: inline-block;
  margin-right: 10px;
  margin-top: 2px;
}
.box-right {
  position: relative;
  width: 760px;
  height: 900px;
  background-color: rgb(255, 255, 255);
  float: left;
  margin-left: 10px;
}
.footer {
  width: 1100px;
  height: 230px;
  margin: auto;
  background-color: rgb(207, 213, 206);
  /* background-color: rgb(25, 116, 35); */
  margin-top: -50px;
}

.footer-img {
  width: 900px;
  height: 200px;
}
.box-right-childen {
  margin-top: 10px;
}
.right {
  width: 400px;
  height: 230px;
  float: left;
  margin-left: 30px;
  /* background-color: rgb(186, 215, 215); */
}
.top {
  width: 360px;
  height: 200px;
  /* background-color: aquamarine; */
  /* background-color: blue;    */
  float: left;
}
.h3 {
}
li {
  list-style: none;
  display: inline-block;
  color: rgb(12, 91, 49);
  font-size: 20px;
}
.ul {
}
.btn {
  border: 0px;
  color: rgb(1, 1, 1);
  font-size: 18px;
  border-color: rgb(51, 120, 73);
  background-color: rgb(227, 226, 226);
}
.right2 {
  width: 300px;
  height: 230px;
  float: left;
  /* background-color: bisque; */
}
</style>
